<script setup lang="ts">
import {reactive, ref} from 'vue'

const zodiacControlCheckbox = ref(true)

const zodiacOP = ['牛', '鼠', '猪', '狗', '鸡', '猴', '羊', '马', '蛇', '龙', '兔', '虎']
const zodiac = ref([...zodiacOP])

const oddEvenOP = ['单', '双']
const oddEven = ref(oddEvenOP)
const combineOEOP = ['合单', '合双']
const combineOE = ref(combineOEOP)
const combineSizeOP = ['合大', '合小']
const combineSize = ref(combineSizeOP)
const sizeCheckboxOP = ['大', '小']
const sizeCheckbox = ref(sizeCheckboxOP)

const colorsOP = ['红', '绿', '蓝']
const colors = ref(colorsOP)
// const redN = [1, 2, 7, 8, 12, 13, 18, 19, 23, 24, 29, 30, 34, 35, 40, 45, 46]
const greenN = [5, 6, 11, 16, 17, 21, 22, 27, 28, 32, 33, 38, 39, 43, 44, 47, 49]
const blueN = [3, 4, 9, 10, 14, 15, 20, 25, 26, 31, 36, 37, 41, 42, 48]

interface Ball {
  num: number,
  visible: boolean,     // true 时显示，false 时隐藏。html属性 visibility :style="{ visibility: ball.visible ? 'visible' : 'hidden' }"
  hiddenCount: number,  // 隐藏的次数，大于 0 时隐藏，等于0时显示，-1 是特殊值，表示可见性固定不变
  btnType: string,
  color: string,
  zodiac: string,
}

const balls: Ball[] = reactive([])
for (let i = 1; i <= 49; i++) {
  const ball: Ball = {
    num: i,
    visible: true,
    hiddenCount: 0,
    btnType: 'danger',
    color: '红',
    zodiac: '牛',
  }
  if (greenN.includes(i)) {
    ball.btnType = 'success'
    ball.color = '绿'
  } else if (blueN.includes(i)) {
    ball.btnType = 'primary'
    ball.color = '蓝'
  }
  ball['zodiac'] = zodiacOP[(i - 1) % 12]
  balls.push(ball)
}
// console.log(balls)

// 设置球的 hiddenCount，同步设置 球的可见性
function doSetBallVisibility(ball: Ball, newVal: boolean) {
  if (isFixed(ball)) {
    return
  }
  if (newVal) {
    if (!ball.visible) {
      // 显示隐藏的球
      ball.hiddenCount--  // 只要是隐藏了的球，它的 hiddenCount肯定大于 1，所以 -- 后的结果是大于等于 0
      if (ball.hiddenCount === 0) {
        ball.visible = true
      }
    }
  } else {
    if (ball.visible) {
      // 第一次隐藏显示的球，把球隐藏，以后只增加隐藏次数
      ball.visible = false
    }
    ball.hiddenCount++
  }
}

function setBallVisibility(condition: boolean,
                           conditionalExpressions: (num: number) => boolean,
                           newVal: boolean)
{
  for (let index = 0; index < balls.length; index++) {
    if (conditionalExpressions(index + 1) === condition) {
      doSetBallVisibility(balls[index], newVal)
    }
  }
}

function zodiacControlCheckboxChange(checked: boolean) {
  if (checked) {
    zodiac.value = [...zodiacOP]
  } else {
    zodiac.value.length = 0
  }
  for (let index = 0; index < balls.length; index++) {
    doSetBallVisibility(balls[index], checked)
  }
}

function zodiacChange(name: string, newVal: boolean) {
  for (let index = 0; index < balls.length; index++) {
    if (balls[index].zodiac === name) {
      doSetBallVisibility(balls[index], newVal)
    }
  }
}

function colorsChange(name: string, newVal: boolean) {
  for (let index = 0; index < balls.length; index++) {
    if (balls[index].color === name) {
      doSetBallVisibility(balls[index], newVal)
    }
  }
}

function isFixed(ball: Ball) {
  return ball.hiddenCount === -1
}

function getBallBgColor(index: number) {
  const ball = balls[index]
  if (isFixed(ball)) {
    return 'Cyan'
  }
  return ball.visible ? 'whitesmoke' : 'Gray'
}

// 左键单击球切换可见性
// 0: 可见
// 1: 不可见
function switchVisibility(index: number) {
  const ball = balls[index]
  if (isFixed(ball)) {
    return
  }
  let hiddenCount = 0 // 现在是不可见的，就设置为 0，切换为可见
  if (ball.visible) {
    // 现在是可见的，就置为 1，切换为不可见
    hiddenCount = 1
  }
  ball.hiddenCount = hiddenCount
  ball.visible = !ball.visible
}

// 右键单击固定可见性
// 0: 不固定
// -1: 固定
function fixVisibility(ball: Ball) {
  let hiddenCount = -1
  if (isFixed(ball)) {
    hiddenCount = 0
  }
  ball.hiddenCount = hiddenCount
}

// 颜色按钮显示方法
function colorBtnControl(colorName: string) {
  //return 'success'
  if (colorName === '红') {
    return 'red'
  } else if (colorName === '绿') {
    return 'green'
  } else if (colorName === '蓝') {
    return 'blue'
  }
  //console.log(num)
  //return 'green'
}

function fillZero(num: number) {
  return num < 10 ? '0' + num : num.toString()
}
</script>

<template>
  <div class="ballGame">
    <!--左侧-->
    <div class="ballBox">
      <!--头部生肖按钮-->
      <el-checkbox-group size="large" v-model="zodiac">
        <div class="zodiac" v-for="name in zodiacOP" :key="name">
          <el-checkbox-button
              :label="name"
              @change="zodiacChange(name, $event)">
          </el-checkbox-button>
        </div>
      </el-checkbox-group>
      <!--球-->
      <div v-for="(ball, index) in balls" :key="index"
           class="ball noDrag"
           :style="{ background: getBallBgColor(index) }"
           @click="switchVisibility(index)"
           @contextmenu.prevent="fixVisibility(balls[index])">
        <el-button
            size="large"
            :style="{ visibility: ball.visible ? 'visible' : 'hidden' }"
            :type="ball.btnType"
            circle>
          {{ fillZero(ball.num) }}
        </el-button>
      </div>
    </div>
    <!--右侧-->
    <div class="siftBtn">
      <!--控制所有生肖的按钮-->
      <el-checkbox-button
          v-model="zodiacControlCheckbox"
          @change="zodiacControlCheckboxChange"
          class="siftControlCheckbox"
          label="生肖">
      </el-checkbox-button>
      <!--其它所有过滤号码的按钮-->
      <el-checkbox-group size="large" v-model="oddEven" class="siftCheckbox">
        <el-checkbox-button
            @change="setBallVisibility(
                index===0,
                 num => num % 2 === 1,
                 $event)"
            v-for="(name, index) in oddEvenOP"
            :label="name"
            :key="name"
        ></el-checkbox-button>
      </el-checkbox-group>

      <el-checkbox-group size="large" v-model="combineOE" class="siftCheckbox">
        <el-checkbox-button
            @change="setBallVisibility(
                index===0,
                 num => (Math.floor(num / 10) + num % 10) % 2 === 1,
                 $event)"
            v-for="(name, index) in combineOEOP"
            :label="name"
            :key="name"
        ></el-checkbox-button>
      </el-checkbox-group>

      <el-checkbox-group size="large" v-model="combineSize" class="siftCheckbox">
        <el-checkbox-button
            @change="setBallVisibility(
                index===0,
                 num => Math.floor(num / 10) + num % 10 < 8,
                  $event)"
            v-for="(name, index) in combineSizeOP"
            :label="name"
            :key="name"
        ></el-checkbox-button>
      </el-checkbox-group>

      <el-checkbox-group size="large" v-model="sizeCheckbox" class="siftCheckbox">
        <el-checkbox-button
            @change="setBallVisibility(
                index===0,
             num=>num<25,
              $event)"
            v-for="(name, index) in sizeCheckboxOP"
            :label="name"
            :key="name"
        ></el-checkbox-button>
      </el-checkbox-group>

      <div class="colorCheckbox">
        <el-checkbox-group v-model="colors" class="siftCheckbox" size="small">
          <div v-for="name in colorsOP" :key="name"
               style="display: inline-block; margin: 0 5px 0 0">
            <el-checkbox-button
                @change="colorsChange(name, $event)"
                :label="name">
              <div :style="{color: colorBtnControl(name),}"
                   style="font-family: '楷体',serif; border: 1px; border-radius: 50%; padding: -30px; font-size: 21px; background-color: white">
                {{ name }}
              </div>
            </el-checkbox-button>
            <div :style="{
                    'background-color': colorBtnControl(name),
                    height: '8px',
                  }">
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.colorCheckbox .el-checkbox-button__inner {
  border-radius: 10px;
  /* background-color: rgb(0, 255, 13); */
}

.colorCheckbox .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #49cce4ee;
  /* border-color: #370dcf; */
}

.colorCheckbox .el-checkbox-button__original {
  border-radius: 5px;
  /* background-color: red; */
}

.colorCheckbox .el-checkbox-button {
  color: #a8a8a8;
}

.colorCheckbox .el-checkbox-button.is-checked {
  /* background-color: #fa2145; */
  border-color: #370dcf;
}


.ballGame
  padding 20px
  display flex

  .ballBox
    width 860px

    .zodiac
      display inline-block
      margin-right 15.2px

    .ball
      display inline-block
      margin-right 30px
      margin-top 25px

  .siftBtn
    .siftControlCheckbox
      margin-top 5px
      margin-bottom 10px

    .siftCheckbox
      margin-top 15px
</style>
